<%= stylesheet_link_tag 'welcome' %>
<%= javascript_include_tag 'welcome' %>
<%= javascript_include_tag "jquery-1.8.3-ui-1.9.2-ujs-2.0.3" %>

<!-- ajax user trace zhangxunhui begin -->
<script type="text/javascript">
	function user_trace_click_project_in_cloud(e){
		link = $(e).attr('href');
		id = link.substring(22);
		$.ajax({
			contentType: "application/json; charset=utf-8",
			timeout: 5000,
			url: '/user_traces/click_project_in_cloud?osp_id=' + id,
			dataType: "json"
		});
	}
</script>
<!-- ajax user trace zhangxunhui end -->

<style type="text/css">
    .tb-navigation {
        position: relative;
        z-index: 400;
    }

        /*blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0;
        }*/

    .navigation {
        color: #666;
        border: 2px solid #d7d6d6;
    }

    .nav-switch {
        position: absolute;
        top: 0;
        right: 0;
        border-width: 14px;
        border-color: #bdbdbd #bdbdbd transparent transparent;
        border-style: solid solid dashed dashed;
        z-index: 10;
    }

    .navigation .nav-switch-icon {
        background-position: -266px 3px;
    }

    .navigation .icon-search, .navigation .nav-pill-cancle, .navigation .nav-switch-icon, .navigation .nav-topbar .topbar-search .topbar-submit, .navigation .nav-topbar-arror {
        /*background: url()*/
    }

    .nav-switch-icon {
        width: 15px;
        height: 15px;
        position: absolute;
        top: -13px;
        right: -13px;
        cursor: pointer;
    }

    .nav-topbar, .type-min {
        position: relative;
    }

    .nav-category-group {
        clear: both;
    }

    .nav-topbar {
        background-color: #f5f4f4;
        border-bottom: 1px solid #e4e4e4;
        z-index: 4;
    }

    .nav-topbar .nav-topbar-content {
        line-height: 36px;
        padding: 0 16px;
        overflow: hidden;
    }

    .nav-topbar-content {
        margin: 0 4px;
        white-space: nowrap;
    }

    ol, ul {
        list-style: none;
    }

    ul, menu, dir {
        display: block;
        list-style-type: disc;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        /*-webkit-padding-start: 40px;*/
    }

    .nav-topbar .nav-topbar-content {
        line-height: 36px;
    }

    li {
        margin-right: 7px;
        float: left;
    }

    .type-line {
        overflow: hidden;
    }

    .nav-category-group {
        clear: both;
    }

    .type-line .nav-category {
        clear: both;
        position: relative;
        padding: 0 100px 0 107px;
        height: 20px;
        overflow: hidden;
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .nav-category h4 {
        position: absolute;
        color: #666;
        font-weight: 400;
        left: 22px;
        top: 0;
        overflow: hidden;
        max-width: 68px;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 5px;
        text-align: left;
    }

    .nav-search-con {
        padding-top: 7px;
    }
</style>

<script type="text/javascript" language="javascript">

    $(function () {
        $("#main").find("a").attr("target", "_blank");
        setCss();
    });
    //设置div居中
    function setCss() {
//        var mainBar = $('#main-content-bar')[0];
//        var topHeight = mainBar.offsetHeight;
//        var welcomeLeft = $('#welcome_left')[0];
//        var leftHeight = welcomeLeft.offsetHeight;
//        var searchbar = $('#search-bar')[0];
//        var searchHeight = searchbar.offsetHeight;
//        var classifiedsearch = $('#classified-search')[0];
//        var classifiedsearchHeight = classifiedsearch.offsetHeight;
//        welcomeLeft.style.marginTop = (topHeight - (leftHeight + classifiedsearchHeight)) / 2 + "px";
//        searchbar.style.marginTop = welcomeLeft.style.marginTop;


//        var mainBar = $('#main-content-bar')[0];
//        var topHeight = mainBar.offsetHeight;
//        var welcomeLeft = $('#welcome_left')[0];
//        var leftHeight = welcomeLeft.offsetHeight;
//        var searchbar = $('#search-bar')[0];
//        var searchHeight = searchbar.offsetHeight;
//        var classifiedsearch = $('#classified-search')[0];
//        // var classifiedsearchHeight = classifiedsearch.offsetHeight;
//        var classifiedsearchHeight = 0;
//        var blockHeight = topHeight - classifiedsearchHeight;
//        welcomeLeft.style.marginTop = (blockHeight - leftHeight) / 2 + "px";
//        searchbar.style.marginTop = (blockHeight - searchHeight) / 2 + "px";

    }
    // 给主页用户弹新页面
    $(document).ready(function ($) {
        $("#loggedas").find("a").attr("target", "_blank");
        //$("#content .tabs_new~ .pagination").find("a").removeAttr("target");
    });
</script>

<div class="projects-topics-cloud-bugs" style="margin-top: 50px;">

  <%########################tag-cloud##################################  %>
  <div class="tag-cloud">
    <div class="tag-cloud-entity" style="margin-top: 5px; margin-left: auto; margin-right: auto; height: 250px;">
    </div>
  </div>
  <%########################tag-cloud##################################  %>

</div>

<!-- begin: 增加首页排行榜信息 张迅晖 2017-10-14 -->
<link href="../../public/themes/redpenny-master/stylesheets/application.css"  rel="stylesheet" type="text/css"/>
<style>
	.fl{float: left;}.fr{float: right;}
	.ml5{margin-left: 5px!important;}.ml10{margin-left: 10px!important;;}.ml20{margin-left: 20px!important;}.ml30{margin-left: 30px;}.ml40{margin-left: 40px;}
	.mr5{margin-right: 5px!important;;}.mr10{margin-right: 10px!important;;}.mr20{margin-right: 20px!important;}.mr30{margin-right: 30px;}.mr40{margin-right: 40px;}
	.mt5{margin-top: 5px!important;;}.mt10{margin-top: 10px!important;;}.mt20{margin-top: 20px!important;}.mt30{margin-top: 30px;}.mt40{margin-top: 40px;}
	.mb5{margin-bottom: 5px!important;;}.mb10{margin-bottom: 10px!important;;}.mb20{margin-bottom: 20px!important;}.mb30{margin-bottom: 30px;}.mb40{margin-bottom: 40px;}
	.color-white{color: #FFFFFF;}
	.color-blue{color: #15bccf;}
	.font-12{font-size: 12px;}.font-14{font-size: 14px;}.font-16{font-size: 16px;}.font-18{font-size: 18px;}.font-20{font-size: 20px;}.font-26{font-size: 26px;}
	.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
	.clearfix{clear:both;zoom:1}
	
	.main{width: 940px;height: auto;margin: 0px auto;}
	.navigation {color: #666;border: 2px solid #d7d6d6;}

	
	.array_list{position: relative;width: 100%;height: 30px;margin-bottom: 20px;}
	.line-word{width: 170px;position: absolute;z-index: 5;text-align: center;background: #FFFFFF;margin: 0px auto;left: 380px;font-weight: bold;color: #269AC9;}
	.line_break{width: 100%;position: absolute;z-index: 4;height: 4px;top: 13px;background-color: #a5a5a5;border-radius: 5px;}
	.rank_list_item{float: left;width:30%;margin:0px 1.6%;min-height: 500px;}
	.ranktitle{border-bottom: 2px solid #CCCCCC;margin: 0px;line-height: 42px;margin-bottom: 10px;}
	.ranktitle span{font-weight: bold;font-size: 18px;margin-right: 10px;max-width: 210px; float: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	.percent_part{display: flex;clear: left;}
	.rank_name{font-size: 14px;max-width: 270px; float: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	.percent_line{background: #0cf;height: 5px;margin: 0px;width: 0px;}
	.rank_item_line{width: 96%;float: right;}
</style>
<div class="main">
	<div class="array_list clearfix mt30">
		<div class="line-word font-20">开源软件排行榜</div>
		<div class="line_break"></div>
	</div>
	<div class="clearfix">
		<div class="rank_list_item">
			<p class="ranktitle"><span><a href="/ossean_ranks/show?type=machine learning">Machine Learning</a></span>(<%=@ossean_rank_result_map["machine learning"].size()%>)</p>
			<% @ossean_rank_result_map["machine learning"].each_with_index do |item,index| %>
			<% if index == 10 %>
				<% break %>
			<% end %>
			<div class="mt10 mb10 rank_item_line">
				<span class="rank_name"><%= link_to item.name, open_source_project_path(OpenSourceProject.find_by_id(item.ossean_id))%></span>
				<div class="percent_part">
					<div style="flex: 1;height: 5px;margin-top: 15px;" class="mr10">
						<p  class="percent_line" value="<%= item.score%>"></p>
					</div>
					<span class="mt5">
						<% if(item.score != nil) %>
							<%= sprintf("%0.3f",item.score * 100)%>%
						<% else %>
							<%= "null"%>
						<% end %>
					</span>
				</div>
			</div>
			<% end %>
		</div>
		<div class="rank_list_item">
			<p class="ranktitle"><span><a href="/ossean_ranks/show?type=database">Database</a></span>(<%=@ossean_rank_result_map["database"].size()%>)</p>
			<% @ossean_rank_result_map["database"].each_with_index do |item,index| %>
			<% if index == 10 %>
				<% break %>
			<% end %>
			<div class="mt10 mb10 rank_item_line">
				<span class="rank_name"><%= link_to item.name, open_source_project_path(OpenSourceProject.find_by_id(item.ossean_id))%></span>
				<div class="percent_part">
					<div style="flex: 1;height: 5px;margin-top: 15px;" class="mr10">
						<p  class="percent_line" value="<%= item.score%>"></p>
					</div>
					<span class="mt5">
						<% if(item.score != nil) %>
							<%= sprintf("%0.3f",item.score * 100)%>%
						<% else %>
							<%= "null"%>
						<% end %>
					</span>
				</div>
			</div>
			<% end %>
		</div>
		<div class="rank_list_item">
			<p class="ranktitle"><span><a href="/ossean_ranks/show?type=testing tools">Testing Tools</a></span>(<%=@ossean_rank_result_map["testing tools"].size()%>)</p>
			<% @ossean_rank_result_map["testing tools"].each_with_index do |item,index| %>
			<% if index == 10 %>
				<% break %>
			<% end %>
			<div class="mt10 mb10 rank_item_line">
				<span class="rank_name"><%= link_to item.name, open_source_project_path(OpenSourceProject.find_by_id(item.ossean_id))%></span>
				<div class="percent_part">
					<div style="flex: 1;height: 5px;margin-top: 15px;" class="mr10">
						<p  class="percent_line" value="<%= item.score%>"></p>
					</div>
					<span class="mt5">
						<% if(item.score != nil) %>
							<%= sprintf("%0.3f",item.score * 100)%>%
						<% else %>
							<%= "null"%>
						<% end %>
					</span>
				</div>
			</div>
			<% end %>
		</div>
	</div>
</div>
<script>
	$(window).load(function(){
		for(var i=0;i<$(".percent_line").length;i++){
			var value=$(".percent_line").eq(i).attr("value");
			$(".percent_line").eq(i).parent().siblings("p").html(parseInt(parseFloat(value)*100)+"%");
			var wid=parseFloat(parseFloat(value)*100).toFixed(2)+"%";
			$(".percent_line").eq(i).animate({width:wid},800);
		}
	})
</script>
<!-- end: 增加首页排行榜信息 张迅晖 2017-10-14 -->

<div class="clearfix"></div>


<style type="text/css">
    /*body {*/
        /*background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;*/
    /*}*/
    .menu{
        margin-top: 20px;
    }

    .menu_list{
        width: 15%;
        font-size: 25px;
        height: 90px;
        background-color: rgb(241,241,241);
        border-radius: 3px;
        text-align: center;
        float: left;
    }
    .number{
        #display: inline-block;
        margin-top: 25px;
        font-size: 25px;
        #color: #ffffff;
        top: 10px;
    }
    .name{
        margin-top: 10px;
        font-size: 15px;
    }
</style>
<div class="menu" style="margin-top: 30px;">
  <div class="menu_list" style="margin-left: 30%;">
    <div class="number"><%= number_with_delimiter(@projects_count, :delimiter => ",") %></div>
    <div class="name">Projects</div>
  </div>
  <div class="menu_list" style="margin-right: 30%; margin-left: 10%;">
    <div class="number"><%= number_with_delimiter(@posts_count, :delimiter => ",") %>+</div>
    <div class="name">Posts</div>
  </div>
</div>


<%###########################tag-cloud-js##############################%>
<%= javascript_include_tag "jqcloud-1.0.4.js" %>
<%#= javascript_include_tag "jquery.js" %>
<%= stylesheet_link_tag "jqcloud.css" %>
<script type="text/javascript">

    function preparedata() {
        var data = new Array();
        <% @projects_for_cloud.each do |project| %>
        obj = {text: "<%= project.name %>", weight: Math.log(<%= project.composite_score %>), link: "<%= open_source_project_path(project)%>"}
        data.push(obj);
        <% end %>
        return data;
    }

    $(function () {
        var data = preparedata();
        $(".tag-cloud-entity").jQCloud(data);
    });
</script>
<%###########################tag-cloud-js##############################%>

<%#= render partial: 'link_to_another' %>

<%###########################访问量统计代码##############################%>
<script type="text/javascript">
    # var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    # document.write(unescape("%3Cspan id='cnzz_stat_icon_1256970726'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1256970726' type='text/javascript'%3E%3C/script%3E"));
</script>

